<template>
 <!--使用跟模块state的数据-->
<div>
{{$store.state.username}}
</div>
<button @click="fn">改变名字</button>
<button @click="$store.commit('editname')">改变</button>
<button @click="$store.dispatch('updateName')">3秒后改变</button>
 <!--使用跟模块getters的数据-->
<div>
{{$store.getters['newname']}}
</div>
</template>

<script >
import {useStore} from 'vuex'
export default {
  name:'App',
  setup(){
    //使用vuex仓库
const store=useStore();
//使用根模块state的数据
console.log(store.state.username);
console.log(store.getters.newname);

//store.commit('editname')
const fn=()=>{
  //调用根模块mutation函数
  store.commit('editname')

}
//调用根模块action函数
// store.dispatch('updatename')
return {fn}

  }

}

</script>
<style>

</style>
